<!-- DogListView.vue -->
<script setup>
import { ref, reactive, onMounted } from "vue";
import { Delete, Edit, Search, Plus, Share } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import {
    getDogListFn,
    addDogFn,
    delDogFn,
    editDogFn,
    queryDogFn,
} from "@/api/dog";

const dogList = ref([]); // 狗狗列表数据
const currentPage = ref(1); // 当前页码
const dialogVisible = ref(false); // 控制弹窗的显示
const type = ref("add"); // 弹窗类型，"add"表示新增，"edit"表示编辑
const value = ref(""); // 上架状态选择
const length = ref(0); // 总条目数

const formData = reactive({
    id: "",
    kind: "",
    listing: "",
    hot: 0,
    views: 0,
    creater: "",
    time: "",
});

const options = [
    { value: "已上架", label: "已上架" },
    { value: "未上架", label: "未上架" },
];

// 获取狗狗列表
const fetchDogList = () => {
    getDogListFn({
        count: currentPage.value, // 当前页码
        pageSize: 10, // 每页数据量
        listing: value.value,  // 将上架状态传给接口
    }).then((response) => {
        dogList.value = response.data.dogList; // 获取当前页数据
        length.value = response.data.length; // 获取总条目数
    }).catch((error) => {
        ElMessage.error("获取狗狗列表失败");
    });
};


// 切换上架状态
const toggleListingStatus = (dog) => {
    editDogFn({
        id: dog.id,
        listing: dog.listing,
    })
    .then(() => {
        ElMessage.success("状态更新成功");
    })
    .catch((error) => {
        ElMessage.error("状态更新失败");
    });
};


// 生命周期钩子，组件加载时获取狗狗列表
onMounted(fetchDogList);

// 分页切换
const currentChange = (page) => {
    currentPage.value = page; // 更新当前页码
    fetchDogList(); // 调用 fetchDogList 重新获取数据
};

// 打开添加狗狗的对话框
const addClick = () => {
    type.value = "add";
    dialogVisible.value = true;
    // 清空表单数据
    Object.assign(formData, {
        id: "",
        kind: "",
        listing: "",
        hot: 0,
        views: 0,
        creater: "",
        time: "",
    });
};

const resetForm = () => {
    formData.kind = ""; // 清空品种名称输入框
    value.value = ""; // 重置上架状态选择框
};

// 提交添加狗狗表单
const submitClick = async () => {
    dialogVisible.value = false;
    formData.id = Math.random();
    await addDogFn(formData);
    ElMessage.success("添加成功");
    fetchDogList(); // 刷新列表
};

// 删除狗狗
const delClick = (id) => {
    delDogFn({ id })
        .then((res) => {
            ElMessage.success(res.message); // 成功消息
            fetchDogList(); // 刷新列表
        })
        .catch((error) => {
            ElMessage.error("删除失败"); // 错误消息
        });
};

// 打开编辑对话框
const editClick = (dog) => {
    type.value = "edit";
    dialogVisible.value = true;
    // 填充表单数据
    Object.assign(formData, dog);
};

// 提交编辑表单
const editSubmitClick = async () => {
    dialogVisible.value = false;
    await editDogFn(formData);
    ElMessage.success("编辑成功");
    fetchDogList();
};

// 查询狗狗
const queryClick = () => {
    if (!formData.kind.trim()) {
        ElMessage.warning("请输入品种名称进行查询");
        return;
    }

    queryDogFn({ kind: formData.kind }).then((response) => {
        console.log(response); // 打印返回的数据，查看实际结构
        if (response.code === 200) {
            if (response.dogList.length > 0) {
                dogList.value = response.dogList;
                length.value = response.length;
            } else {
                ElMessage.warning("未找到匹配的狗狗");
            }
        } else {
            ElMessage.error("查询数据失败：" + response.message);
        }
    }).catch(() => {
        ElMessage.error("查询失败");
    });
};


</script>

<template>
    <div>
        <header>
            <div class="head">
                <span class="h-sp-1">
                    品种名称
                    <el-input
                        v-model="formData.kind"
                        placeholder="请输入"
                        style="width: 240px"
                    ></el-input>
                </span>
                <span class="h-sp-2">
                    上架状态
                    <el-select
                        v-model="value"
                        placeholder="请选择"
                        style="width: 240px"
                        @change="fetchDogList"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </span>
                <span class="h-sp-3">
                    <el-button size="small" type="primary" @click="resetForm"
                        >重置</el-button
                    >
                    <el-button size="small" type="primary" @click="queryClick"
                        >查询</el-button
                    >
                </span>
            </div>
            <div class="new">
                <el-button size="large" type="primary" @click="addClick">
                    新增百科
                </el-button>
            </div>
        </header>

        <!-- 狗狗列表 -->
        <el-table :data="dogList" stripe style="width: 100%" border>
            <el-table-column type="index" label="编号" width="60">
                <template #="{ $index }">
                    <span>{{ $index + 1 + (currentPage - 1) * 10 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="kind"
                label="品种名称"
                width="150"
            ></el-table-column>
            <el-table-column label="上架状态">
                <template #="data">
                    <el-switch
                        v-model="data.row.listing"
                        :active-value="true"
                        :inactive-value="false"
                        @change="toggleListingStatus(data.row)"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="hot" label="宠物热度"></el-table-column>
            <el-table-column prop="views" label="浏览次数"></el-table-column>
            <el-table-column prop="creater" label="创建人"></el-table-column>
            <el-table-column prop="time" label="创建时间"></el-table-column>
            <el-table-column label="操作">
                <template #="data">
                    <el-button
                        type="primary"
                        :icon="Edit"
                        @click="editClick(data.row)"
                    ></el-button>
                    <el-button
                        type="danger"
                        :icon="Delete"
                        @click="delClick(data.row.id)"
                    >
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="fenye">
            <el-pagination
                @current-change="currentChange"
                style="margin-top: 10px"
                v-model:current-page="currentPage"
                background
                layout="prev, pager, next"
                :page-size="10"
                :total="length"
            />
        </div>
    </div>

    <!-- 添加/编辑框 -->
    <el-dialog
        v-model="dialogVisible"
        :title="type === 'add' ? '添加狗狗' : '编辑狗狗'"
        width="600"
    >
        <el-form :model="formData" label-width="80px">
            <el-form-item label="品种名称">
                <el-input
                    v-model="formData.kind"
                    placeholder="请输入品种名称"
                />
            </el-form-item>
            <el-form-item label="上架状态">
                <el-select
                    v-model="formData.listing"
                    placeholder="请选择上架状态"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="宠物热度">
                <el-input v-model="formData.hot" placeholder="请输入宠物热度" />
            </el-form-item>
            <el-form-item label="创建人">
                <el-input
                    v-model="formData.creater"
                    placeholder="请输入创建人"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button
                    v-if="type === 'add'"
                    type="primary"
                    @click="submitClick"
                    >提交</el-button
                >
                <el-button v-else @click="editSubmitClick">修改</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
.head {
    margin-left: 5px;
    .h-sp-1 {
        .el-input {
            margin-left: 10px;
        }
    }
    .h-sp-2 {
        margin-left: 30px;
        .el-select {
            margin-left: 10px;
        }
    }
    .h-sp-3 {
        margin-left: 30px;
    }
}
.new {
    margin-left: 5px;
    margin-top: 20px;
}
.el-table {
    margin-top: 20px;
    margin-left: 5px;
}
.fenye {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
</style>
